import React, { Component } from 'react';
import { actionGetList } from '../../../store/actions'
import { connect } from 'react-redux'
import { List } from 'antd-mobile'
class Index extends Component {
	getList() {
		const action = actionGetList()
		this.props.dispatch(action)
	}
	componentDidMount() {
		this.props.list.length === 0 && this.getList()
	}
	render() {
		const { list, routes } = this.props
		return (
			<div>
				<List>
					{
						list.length > 0 && list.map(v => {
							return <List.Item key={v.id}
								prefix={<img src={v.url}></img>}
								description={v.desc}
								onClick={() => this.props.history.push({
									pathname: '/detail',
									state: v
								})}
							>
								<p>{v.title}</p>
								<p style={{ color: 'red' }}>￥{v.price}</p>
							</List.Item>
						})
					}
				</List>
			</div>
		);
	}
}

export default connect(state => state, dispatch => ({ dispatch }))(Index);
